<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单空间绑定</title>
	<style type="text/css" media="screen">
		/*.demo{
			width:100px;
			height:30px;
			border:1px solid red;
		}*/
		#aaa{
			width: 100px;
		}
	</style>
</head>
<body>
<!-- 复选框 -->
        <div id="app-1">
        	   <input type="checkbox" id="checkbox" v-model="checked">
              <label for="checkbox">{{ checked }}</label>
        </div>
 <!-- 文本 -->
         <div id="app-2">
         	    <input v-model="message" placeholder="edit me">
              <p>Message is: {{ message }}</p>
         </div>
  <!-- 单选列表 -->
          <div id="app-3" class="demo">
          	      <select name="" id="aaa" v-model="selected">
          	      	<option>房贷</option>
          	      	<option>车贷</option>
          	      	<option>其他</option>
          	      </select>
          </div>
   <!-- 单选按钮 -->
          <div id="app-4" class="demo">
		<input type="radio" id="one" value="One" v-model="picked">
		<label for="one">One</label>
		<br>
		<input type="radio" id="two" value="Two" v-model="picked">
		<label for="two">Two</label>
		<br>
		<span>Picked: {{ picked }}</span>
	</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app1 = new Vue({
		el: '#app-1',
		data: {
			checked:false,
		}
	})

	var app2 = new Vue({
		el: '#app-2',
		data: {
			message: '',
		}
	})

	var app4 = new Vue({
		el: '#app-4',
		data: {
			picked: ''
		}
	})
</script>
</html>